<template>
  <div class="subsystem-container">
    <el-card shadow="never">
      <div class="flex-start">
        <el-button v-permission="'roleManage-add'" size="small" type="primary" @click="add"> 新 增 </el-button>
      </div>
      <div class="menu-table">
        <yl-table ref="table" :get-data="getData" border style="margin-top: 10px" :column="tableColumn">
          <div slot="status" slot-scope="scope" class="flex" style="width: 40px" @click="handleStatusChange(scope.row)">
            <el-switch :value="scope.row.status" active-color="#304F9C" inactive-color="#E5E5E5" />
          </div>
          <el-table-column label="操作" width="340">
            <template slot-scope="scope">
              <el-button v-permission="'roleManage-data'" size="mini" type="text" @click="record(scope.row)"> 数据权限 </el-button>
              <el-button v-permission="'roleManage-menu'" size="mini" type="text" @click="menu(scope.row)"> 菜单权限 </el-button>
              <el-button v-permission="'roleManage-edit'" size="mini" type="text" @click="edit(scope.row)"> 修改 </el-button>
              <el-button v-permission="'roleManage-delete'" size="mini" type="text" @click="del(scope.row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </yl-table>
      </div>
    </el-card>
    <Dialog ref="dialog" :table-update="tableUpdate" />
    <Menu ref="menu" />
    <Record ref="record" :table-update="tableUpdate" />
  </div>
</template>

<script>
import { internetApi } from '@/api/api'

export default {
  components: {
    Dialog: () => import('./dialog'),
    Menu: () => import('./menu'),
    Record: () => import('./record')
  },
  data() {
    return {
      tableColumn: [
        { prop: 'name', label: '角色名称' },
        { prop: 'description', label: '角色描述' },
        {
          slotName: 'status',
          label: '角色状态'
        }
      ]
    }
  },

  methods: {
    tableUpdate(...arg) {
      return this.$refs.table.update(...arg)
    },
    async getData(currentPage, pageSize) {
      const { data } = await this.$request(internetApi.getRoleList, { currentPage, pageSize })
      return {
        list: data.list,
        total: data.count
      }
    },
    async handleStatusChange(row) {
      //防止重复提交
      if (row.statusLoading) return
      row.statusLoading = true
      try {
        await this.$request(internetApi.updateRoleStatus, { id: row.id, status: !row.status })
        row.status = !row.status
        row.statusLoading = false
        this.$message.success('操作成功')
      } catch (error) {
        row.statusLoading = false
      }
    },
    //新增
    add() {
      this.$refs.dialog.open()
    },
    //编辑
    edit(row) {
      this.$refs.dialog.open(row)
    },
    //删除
    del(row) {
      //提示框二次确认
      this.$confirm(`你确定要删除${row.name}吗?`, { type: 'warning' })
        .then(async () => {
          await this.$request(internetApi.deleteRole, { id: row.id })
          this.tableUpdate()
          this.$message.success('操作成功')
        })
        .catch(() => {})
    },
    //菜单权限
    menu(row) {
      this.$refs.menu.open(row.id)
    },
    //数据权限
    record(row) {
      this.$refs.record.open(row)
    }
  }
}
</script>

<style lang="scss" scoped></style>
